<template>
  <div class="linggan">
    <!-- 导航栏 -->
    <van-nav-bar left-text="婚礼·灵感" fixed>
      <template #right>
        <span @click="toAnli">全部案例</span>
      </template>
    </van-nav-bar>
    <!-- 标签页 -->
    <van-tabs v-model="active1" sticky offset-top="46px">
      <van-tab title="婚礼现场">
        <div class="img1" v-for="(item, i) in img1" :key="i.id">
          <img :src="item" alt="" />
        </div>
        <div class="img1" v-for="(item, i) in img1" :key="i.id">
          <img :src="item" alt="" />
        </div>
      </van-tab>
      <van-tab title="婚照灵感">
        <div class="img2" v-for="(item, i) in img2" :key="i.id">
          <img :src="item" alt="" />
        </div>
        <div class="img2" v-for="(item, i) in img2" :key="i.id">
          <img :src="item" alt="" />
        </div>
      </van-tab>
      <van-tab title="婚纱礼服">
        <div class="img3" v-for="(item, i) in img3" :key="i.id">
          <img :src="item" alt="" />
        </div>
      </van-tab>
      <van-tab title="创意物件">
        <div class="img4" v-for="(item, i) in img4" :key="i.id">
          <img :src="item" alt="" />
        </div>
      </van-tab>
    </van-tabs>

    <!-- 底部导航栏 -->
    <van-tabbar v-model="active">
      <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/linggan" icon="fire-o">婚礼灵感</van-tabbar-item>
      <van-tabbar-item to="/yongpin" icon="shop-o">结婚用品</van-tabbar-item>
      <van-tabbar-item to="/me" icon="friends-o">我们</van-tabbar-item>
    </van-tabbar>
    <go-top></go-top>
  </div>
</template>

<script>
import GoTop from "@/components/GoTop.vue";
export default {
  components: { GoTop },
  data() {
    return {
      active: 1,
      active1: 0,
      img1: [
        "/img/linggan1/1.jpg",
        "/img/linggan1/2.jpg",
        "/img/linggan1/3.jpg",
      ],
      img2: [
        "/img/linggan2/1.jpg",
        "/img/linggan2/2.jpg",
        "/img/linggan2/3.jpg",
        "/img/linggan2/4.jpg",
        "/img/linggan2/5.jpg",
        "/img/linggan2/6.jpg",
      ],
      img3: [
        "/img/linggan3/1.jpg",
        "/img/linggan3/2.jpg",
        "/img/linggan3/3.jpg",
        "/img/linggan3/4.jpg",
        "/img/linggan3/5.jpg",
        "/img/linggan3/6.jpg",
        "/img/linggan3/7.jpg",
        "/img/linggan3/8.jpg",
      ],
      img4: [
        "/img/linggan4/1.jpg",
        "/img/linggan4/2.jpg",
        "/img/linggan4/3.jpg",
        "/img/linggan4/4.jpg",
        "/img/linggan4/5.jpg",
        "/img/linggan4/6.jpg",
        "/img/linggan4/7.jpg",
        "/img/linggan4/8.jpg",
      ],
    };
  },
  methods: {
    toAnli() {
      this.$router.push("/anli");
    },
  },
};
</script>

<style>
.linggan .van-nav-bar__left .van-nav-bar__text {
  color: #000;
  font-size: 16px;
  font-weight: 1000;
}
.linggan .van-nav-bar__right .van-nav-bar__text {
  color: #747171;
  font-size: 12px;
}
.linggan .van-tab__text--ellipsis {
  font-size: 13px;
}
.linggan .van-tabs__line {
  width: 20px;
}
.linggan .van-tab--active {
  font-weight: 800;
}
.linggan .van-tab__pane {
  margin-top: 46px;
  padding: 0 10px;
  margin-bottom: 50px;
}
.linggan .van-tab__pane .img1 img {
  width: 100%;
  border-radius: 5px;
}
.linggan .van-tab__pane .img2,
.linggan .van-tab__pane .img3,
.linggan .van-tab__pane .img4 {
  display: contents;
}
.linggan .van-tab__pane .img2 img {
  padding: 0 5px;
  width: 46%;
  border-radius: 10px;
}
.linggan .van-tab__pane .img3 img {
  padding: 2px;
  width: 48%;
  border-radius: 5px;
}
.linggan .van-tab__pane .img4 img {
  padding: 2px;
  width: 48%;
  border-radius: 5px;
}
.linggan .van-tabbar-item--active {
  color: red;
}
</style>